From b81f984e98f12742c645787f28ac483ac85c8843 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 14 Sep 2022 13:48:23 +0200 Subject: build(web/ui): Update dependencies This change updates the dependencies of the OpenDC web interface were possible. We remain on React 17 until PatternFly adds support for the new React version. --- .../opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index 6297b8c3..c331761b 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -48,7 +48,7 @@ import { useTopology } from '../../../../data/topology' import { goToRoom } from '../../../../redux/actions/interaction-level' import { openTopology } from '../../../../redux/actions/topology' -const TopologyMap = dynamic(() => import('../../../../components/topologies/TopologyMap')) +const TopologyMap = dynamic(() => import('../../../../components/topologies/TopologyMap'), { ssr: false }) /** * Page that displays a datacenter topology. -- cgit v1.2.3 From b8f726cd84ee5b7b0816d04d802f53f0815f6d82 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 14 Sep 2022 14:23:02 +0200 Subject: fix(web/ui): Only display selected metrics This change fixes an issue with the web interface where all available metrics were shown to the user, instead of the metrics belonging to the portfolio. --- .../src/pages/projects/[project]/portfolios/[portfolio].js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js index 68345d0b..4b9aa437 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js @@ -45,7 +45,7 @@ import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview' import { usePortfolio } from '../../../../data/project' -const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults')) +const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'), { ssr: false }) /** * Page that displays the results in a portfolio. -- cgit v1.2.3 From 9dd75a9a40f7f2aebbc617980c99085f9dc688f8 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 14 Sep 2022 23:02:46 +0200 Subject: refactor(web/ui): Move project selector into masthead This change moves the project selector into the masthead since it affects the whole application. This follows the PatternFly guidelines. --- opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js | 10 +--------- .../src/pages/projects/[project]/portfolios/[portfolio].js | 2 -- .../src/pages/projects/[project]/topologies/[topology].js | 2 -- 3 files changed, 1 insertion(+), 13 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js index 39fcb4f3..e4e2156b 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js @@ -21,9 +21,7 @@ */ import { useRouter } from 'next/router' -import ContextSelectionSection from '../../../components/context/ContextSelectionSection' import ProjectOverview from '../../../components/projects/ProjectOverview' -import ProjectSelector from '../../../components/context/ProjectSelector' import { useProject } from '../../../data/project' import { AppPage } from '../../../components/AppPage' import Head from 'next/head' @@ -55,14 +53,8 @@ function Project() { ) - const contextSelectors = ( - - - - ) - return ( - + {project?.name ?? 'Project'} - OpenDC diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js index 4b9aa437..460785c1 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js @@ -40,7 +40,6 @@ import { import { AppPage } from '../../../../components/AppPage' import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' import PortfolioSelector from '../../../../components/context/PortfolioSelector' -import ProjectSelector from '../../../../components/context/ProjectSelector' import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview' import { usePortfolio } from '../../../../data/project' @@ -81,7 +80,6 @@ function Portfolio() { const contextSelectors = ( - ) diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index c331761b..d3892710 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -23,7 +23,6 @@ import dynamic from 'next/dynamic' import { useRouter } from 'next/router' import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' -import ProjectSelector from '../../../../components/context/ProjectSelector' import TopologySelector from '../../../../components/context/TopologySelector' import TopologyOverview from '../../../../components/topologies/TopologyOverview' import { useDispatch } from 'react-redux' @@ -90,7 +89,6 @@ function Topology() { const contextSelectors = ( - ) -- cgit v1.2.3 From 98bc4c3e9458aea98890b770493f14327a7bc7c4 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 15 Sep 2022 22:52:00 +0200 Subject: refactor(web/ui): Use PatternFly Charts for plots This change updates the OpenDC web interface to use the PatternFly Charts package to render the results of a portfolio. Previously, we used Recharts, but this package does not support SSR, whereas the PatternFly Charts package matches our design framework. --- .../src/pages/projects/[project]/portfolios/[portfolio].js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js index 460785c1..615529e7 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js @@ -58,7 +58,6 @@ function Portfolio() { const resultsRef = useRef(null) const { data: portfolio } = usePortfolio(projectId, portfolioNumber) - const project = portfolio?.project const breadcrumb = ( @@ -94,7 +93,7 @@ function Portfolio() { Portfolio - +